<template>
  <div class="container-big wing-blank forward-give-page">
    <div class="forward-give-desc">
      <p>成功发起转送后系统将生成转送激活码，发送短信至您预留的受赠人手机号。</p>
      <p>受赠人需要在2019年4⽉25⽇前激活转送票。</p>
      <p>
        其他详细内容可阅读 <router-link to="/forward/agreement">
          《转送协议》
        </router-link>
      </p>
    </div>
    <co-list form>
      <co-list-item>
        <span class="forward-give-form-label">
          姓名
        </span>
        <co-input slot="right" v-model.trim="name" placeholder="请输入受赠人姓名" />
      </co-list-item>
      <co-list-item>
        <span class="forward-give-form-label">
          手机号
        </span>
        <co-input slot="right" v-model.trim="mobile" placeholder="请输入受赠人手机号" />
      </co-list-item>
    </co-list>
    <co-button block :disabled="!canForward" :loading="processing" color="primary" class="forward-give-submit" @click.stop="forward">
      发起转送
    </co-button>
  </div>
</template>
<script>
import services from "../../api/forward";
export default {
  data() {
    return {
      name: "",
      mobile: "",
      processing: false
    };
  },
  mounted() {
    const { activityId, ticketId } = this.$route.query;
    if (!activityId || !ticketId) {
      this.$toast("必要参数缺失");
      return;
    }
  },
  methods: {
    // 提交转赠
    async forward() {
      const isValidateOK = this.validateFormData();
      if (!isValidateOK) return;

      const isConfirm = await this.confirmGiving();
      if (!isConfirm) return;

      await this.forwardCommit();
    },
    // 简单检验表单值
    validateFormData() {
      if (!this.name) {
        this.$toast("请输入受赠人姓名");
        return false;
      }
      if (!/^\d{11}$/.test(this.mobile)) {
        this.$toast("请输入合法的手机号(仅支持中国地区的手机号)");
        return false;
      }
      return true;
    },
    // 二次确认弹窗
    confirmGiving() {
      return this.$confirm(
        `您确认将票转赠给用户: ${this.name} - ${this.mobile} 吗?`,
        {
          title: "转赠确认",
          okLabel: "确认",
          cancelLabel: "取消",
          showCancel: true
        }
      );
    },
    // 提交转赠
    async forwardCommit() {
      const { activityId, ticketId } = this.$route.query;
      this.processing = true;
      try {
        const { success } = await services.give({
          activityId,
          ticketId,
          name: this.name,
          countryCode: "86",
          tel: this.mobile
        });
        this.processing = false;
        if (success) {
          this.$router.replace({
            path: "/forward/give/detail",
            query: {
              activityId,
              ticketId
            }
          });
        }
      } catch (err) {
        this.processing = false;
      }
    }
  },
  computed: {
    // 是否能发起转赠
    canForward() {
      const { activityId, ticketId } = this.$route.query;
      return activityId && ticketId;
    }
  }
};
</script>
<style lang="less">
.forward-give-page {
  text-align: left;
  .forward-give-desc {
    padding-top: 35px;
    padding-bottom: 40px;
    font-size: 24px;
    color: #fff;
    > p {
      margin-top: 10px;
      &:first-child {
        margin-top: 0;
      }
    }
    a {
      color: #f42751;
    }
  }

  .forward-give-form-label {
    width: 112px;
  }

  .forward-give-submit {
    margin-top: 30px;
    border-radius: 2px;
    height: 96px;
  }
}
</style>
